<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="../../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!doctype html>
<html>
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="${ctx}/css/sapar.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/css/common.css" />
<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
<script type="text/javascript" src="${ctx}/js/sapar.js"></script>
<script type="text/javascript" src="${ctx}/js/WdatePicker.js"></script>
<script type="text/javascript" src="${ctx}/assets/layer/layer.js"></script>
<script type="text/javascript" src="${ctx}/imgs/ichart.1.2.1.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="${ctx}/js/mask.js"></script>

<style>
.tab{border-collapse: collapse;width: 100%;}
.tab tr:nth-of-type(2n) td{background:#EFF6FA}
.tab td{background:#fff;}
.tab td img{float: left;}
.tab_left{margin-top: 10px;padding-left:100px;background-size: 80px;background-repeat: no-repeat;background-position:10px center;}
.clear{clear: both;}
.tab_left ul,.tab_left ul li,.tab_bottom ul{float: left;width: 100%;margin: 0;padding: 0;line-height: 24px;list-style:none;}
.tab_bottom{margin: 10px 0}
.tab_bottom ul li{margin: 0 1%;float: left;width: 30%;line-height: 30px;background-color: #3eafe0;color: #fff;border-radius: 3px;text-align: center;}
.tab_bottom ul li.bg_color_01{background-color: #59bc5e;}
.tab_bottom ul li.bg_color_02{background-color: #f8c969;}
.tab_bottom ul li.bg_color_03{background-color: #ed7764;}

.tab_bottom ul li:nth-child(2){padding: 0 3%;padding: 0}
.clred{font: normal;color: red}
.clblue{font: normal;color: blue}
#zhanwu{
color: red;
font-size:1.2em;
}
.overflowdiv{
overflow: auto;
}
.overflowdiv table{
width:100%;
text-align: center;
}
.overflowdiv table thead td{
background-color: #4a5273;
opacity:0.7;
}

th{
	text-align: left;
}
td{
	text-align: left;
}
</style>
<title>灭菌管理</title>
</head>

<body>
	<div id="mask" class="mask"></div> 
    <div id="saper-container">
        <div id="saper-hd"></div>
        <div id="saper-bd">
            <div class="subfiled clearfix">
                <h2>灭菌管理</h2>
            </div>
            <div class="subfiled-content">
				<table class="tab">
				<c:if test="${lstEquips != null}">
					<c:forEach items="${lstEquips}" var="equip" varStatus="vs">
						<tr style="background:#fff" data="${equip.equipId}" id="${equip.equipId}" class="equipdata">
						    <td>
						      <table class="tab1" style="margin:auto;margin:30px 5px;">
						         <tr>
						           <td width="160">${equip.equipName}</td>
					               <td width="377">
								      <div class="tab_left" style="background-image:url(${ctx}/imgs/1.png)">
								        <ul>
								          <li>设备名称：<span class="clred">${equip.equipName}</span></li>
								          <li>灭菌软件：<span class="clred">无</span></li>
								          <li>灭菌流水：<span class="clred">无</span></li>
											<li>开始时间：<span class="clred"></span></li>
								          <li>当前状态：<span class="clred">未开始</span></li>
								        </ul>
								        <div class="clear"></div>
								      </div>
								      <div class="tab_bottom">
								          <ul id="eq${vs.count}">
								          	  <li class="bg_color_01 start">开始</li>
								              <li class="bg_color_02 pause" style="display: none;" >暂停</li>
								              <li class="bg_color_03 end" style="display: none;">结束</li>
								              <%-- <li class="config" data="${equip.equipNo}">添加</li> --%>
								          </ul>
								          <!-- <div class="clear"></div> -->
								      </div>
						           </td>
						         </tr>
						      </table>
						      <div class="overflowdiv">
							      <table class="qxtable gbin1-list">
								    <thead style="font-size: 15px;">
								        <tr>
									       <td>灭菌流水</td>
									       <td>灭菌人</td>
									       <td>灭菌程序</td>
									       <td>灭菌日期</td>
									       <td>操作</td>
								        </tr>
								     </thead>
						             <tbody>
						                 <c:if test="${lstMiejuns != null }">
				                             <c:forEach items="${lstMiejuns }" var="miejun">
				                                 <c:if test="${equip.equipId == miejun.miejunShebeiTiaoma }">
				                                     <tr data="${miejun.miejunLiushui }">
					                                     <td>${miejun.miejunLiushui }</td>
							                             <td>${empMap[miejun.miejunMeijunrenTiaoma] }</td>
							                   			 <td>${miejun.zsSoft.softName }</td>
							                  			 <td><fmt:formatDate value="${miejun.miejunKaishiTime}" type="date" pattern="yyyy-MM-dd" /></td>
							                  			 <td><input type="button" value="↑" class="upbtn" /></td>
						                  			 </tr>
				                                 </c:if>
				                             </c:forEach>
				                           </c:if>
						             </tbody>
								  </table>
						      </div>
						    </td>
						    <td>
						    	<div id="canvasDiv${vs.count}"></div>
						    </td>
						  </tr>
					</c:forEach>
				</c:if>
				<c:if test="${lstEquips == null}">
				    <center><span id="zhanwu">暂无可用设备</span></center>
				</c:if>
				</table>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
$(window).load(function() {
	var tt = $(".tab").find(".equipdata");
	var yikaishiList = ${miejunIng};
	var equipMjls = ${eqpIdMjls};
	var softMap = ${softAll};
	var btn = false;
	var equipId = null;
	var arra = [];
	for (var i = 0; i < tt.length; i++ ){
		equipId = $(tt[i]).attr("data");
		for(var j = 0; j < yikaishiList.length; j++ ){
			if(yikaishiList[j] == equipId){
				arra.push(equipId);
			}
		}
	}
	if(arra.length>0){
		var bb = null;
		for(var k = 0; k < arra.length; k++ ){
			console.log(equipMjls[arra[k]][1]);
			bb = $(".tab").find('#'+arra[k]+'').find(".tab1").find("td:eq(1)");
			$(bb).find(".tab_bottom").find("ul").find("li:eq(0)").css("display","none");
			$(bb).find(".tab_bottom").find("ul").find("li:eq(1)").css("display","");
			$(bb).find(".tab_bottom").find("ul").find("li:eq(2)").css("display","");
			$(bb).find(".tab_left").find("ul").find("li:eq(1)").find("span").text(softMap[equipMjls[arra[k]][1]].softName);
			$(bb).find(".tab_left").find("ul").find("li:eq(2)").find("span").text(equipMjls[arra[k]][0]);
			$(bb).find(".tab_left").find("ul").find("li:eq(3)").find("span").text(equipMjls[arra[k]][2]);
            $(bb).find(".tab_left").find("ul").find("li:eq(4)").find("span").text("灭菌中");
		}
		
	}
});

$(function(){
	$(".start").click(function(){
		var ls = $(this).closest(".equipdata").find("td:eq(0)").find(".overflowdiv").find("table tbody tr");
		if(ls.length == 0){
		    console.log("111");
		    layer.msg("此设备无可进行灭菌的流水");
		}
		var liushui = $(ls).attr("data");
		var btn =true;
		if(isNullOrEmpty(liushui)){
			btn = false;
			return btn;
		}
		showMask();
		if(btn){
			$.ajax({
				type:"post",
				url:"${ctx}/miejun/equippackaSave.do?liushui="+liushui,
				error:function(){
					layer.alert("网络故障，稍后再试");
				},
				success:function(data){
					if(data.status=="true"){
		 	           	layer.msg("开始成功");
		 	           	$(this).remove();
		 	            hideMask();
		 	            window.location.reload();
		           	}else{
		           		 layer.msg(data.msg);
		           	};
				}
			});
		};
	});
	
	$(".end").click(function(){
		showMask();
		var equipid = $(this).closest(".equipdata").attr("data");
		$.ajax({
			type:"post",
			url:"${ctx}/miejun/equippackEnd.do?equipid="+equipid,
			error:function(){
				layer.alert("网络故障，稍后再试");
			},
			success:function(data){
				if(data.status=="true"){
					console.log("dd");
	 	           	layer.msg("结束成功");
	 	           	hideMask();
	 	            window.location.reload();
	           	}else{
	           		 layer.msg(data.msg);
	           	}
			}
		});
	});
	
	var flow=[];
	for(var i=0;i<61;i++){
		flow.push(Math.floor(Math.random()*(30+((i%12)*5)))+10);
	}
	
	var data = [
	         	{
	         		name : 'SL',
	         		value:flow,
	         		color:'#0d8ecf',
	         		line_width:2
	         	}
	         ];
	var labels = ["2012-12-01","2012-12-02","2012-12-03","2012-12-04","2012-12-05","2012-12-06"];
	var chart = new iChart.LineBasic2D({
		render : 'canvasDiv1',
		data: data,
		align:'center',
		title : {
			text:'设备运行曲线参数',
			fontsize:24,
			color:'#dedede'
		},
		width : 650,
		height : 350,
		shadow:true,
		shadow_color : '#000000',
		shadow_blur : 4,
		shadow_offsetx : 0,
		shadow_offsety : 2,
		background_color:'#ffffff',
		tip:{
			enable:true,
			shadow:true
		},
		crosshair:{
			enable:true,
			line_color:'#62bce9'
		},
		sub_option : {
			label:false,
			hollow_inside:false,
			point_size:8
		},
		coordinate:{
			width:600,
			height:260,
			grid_color:'#cccccc',
			axis:{
				color:'#cccccc',
				width:[0,0,2,2]
			},
			grids:{
				vertical:{
					way:'share_alike',
			 		value:5
				}
			},
			scale:[{
				 position:'left',	
				 start_scale:0,
				 end_scale:100,
				 scale_space:10,
				 scale_size:2,
				 label : {color:'#000000',fontsize:11},
				 scale_color:'#9f9f9f'
			},{
				 position:'bottom',	
				 label : {color:'#000000',fontsize:11},
				 labels:labels
			}]
		}
	});
	var chart2 = new iChart.LineBasic2D({
		render : 'canvasDiv2',
		data: data,
		align:'center',
		title : {
			text:'设备运行曲线参数',
			fontsize:24,
			color:'#dedede'
		},
		width : 650,
		height : 350,
		shadow:true,
		shadow_color : '#000000',
		shadow_blur : 4,
		shadow_offsetx : 0,
		shadow_offsety : 2,
		background_color:'#eff6fa',
		tip:{
			enable:true,
			shadow:true
		},
		crosshair:{
			enable:true,
			line_color:'#62bce9'
		},
		sub_option : {
			label:false,
			hollow_inside:false,
			point_size:8
		},
		coordinate:{
			width:600,
			height:260,
			grid_color:'#cccccc',
			axis:{
				color:'#cccccc',
				width:[0,0,2,2]
			},
			grids:{
				vertical:{
					way:'share_alike',
			 		value:5
				}
			},
			scale:[{
				 position:'left',	
				 start_scale:0,
				 end_scale:100,
				 scale_space:10,
				 scale_size:2,
				 label : {color:'#000000',fontsize:11},
				 scale_color:'#9f9f9f'
			},{
				 position:'bottom',	
				 label : {color:'#000000',fontsize:11},
				 labels:labels
			}]
		}
	});
	var chart3 = new iChart.LineBasic2D({
		render : 'canvasDiv3',
		data: data,
		align:'center',
		title : {
			text:'设备运行曲线参数',
			fontsize:24,
			color:'#dedede'
		},
		width : 650,
		height : 350,
		shadow:true,
		shadow_color : '#000000',
		shadow_blur : 4,
		shadow_offsetx : 0,
		shadow_offsety : 2,
		background_color:'#ffffff',
		tip:{
			enable:true,
			shadow:true
		},
		crosshair:{
			enable:true,
			line_color:'#62bce9'
		},
		sub_option : {
			label:false,
			hollow_inside:false,
			point_size:8
		},
		coordinate:{
			width:600,
			height:260,
			grid_color:'#cccccc',
			axis:{
				color:'#cccccc',
				width:[0,0,2,2]
			},
			grids:{
				vertical:{
					way:'share_alike',
			 		value:5
				}
			},
			scale:[{
				 position:'left',	
				 start_scale:0,
				 end_scale:100,
				 scale_space:10,
				 scale_size:2,
				 label : {color:'#000000',fontsize:11},
				 scale_color:'#9f9f9f'
			},{
				 position:'bottom',	
				 label : {color:'#000000',fontsize:11},
				 labels:labels
			}]
		}
	});
	//开始画图
	chart.draw();
	chart2.draw();
	chart3.draw();
});

//点击tr切换位置，
//上移
$("input.upbtn").each(function () {
	$(this).click(function () {
		var $tr = $(this).parent("td").parent("tr");
		if ($tr.index() >= 1) {
			$tr.prev().before($tr);
		}
	});
});


 //拖拽进行移动tr的位置：
 var ullength = $(".qxtable").find("tbody")//
    ullength.sortable({
	      revert: true
	    });
   ullength.find("tr").disableSelection(); //找到每个里面的tr进行拖拽操作；
   
function callbackQxData(chk_value,id){
	console.log(chk_value);
	console.log(id);
	$("#"+id).children("li[id='pause']").css("display","inline");
	$("#"+id).children("li[id='start']").css("display","none");
	$("#"+id).children("li[id='end']").attr("data",chk_value); 
}
function isNullOrEmpty(strVal){
	strVal = strVal.replace(/(^\s*)|(\s*$)/g,"");
	if(strVal == '' || strVal == null || strVal == undefined){
		return true;
	}else{
		return false;
	}
}
</script>
 
</html>